export const baseWindow = `
import { PhWindow } from 'phoeon'
interface Window{
    max:{type:Boolean,default:true},
    min:{type:Boolean,default:true},
    type:String,
    visible:Boolean,
    "action-align":{
        type:String,
        default:"flex-end"
    }
}
`;
export const windowDemo = `
<ph-window :visible="visible" @done="onDone" @close="onClose" @mask-click="onDone">
    <template v-slot:title>
        this is title
    </template>
    
    <p>阿斯利康减肥撒风</p>
    <p>阿斯利康减肥撒风</p>
    <p>阿斯利康减肥撒风</p>
    <p>阿斯利康减肥撒风</p>
    <p>阿斯利康减肥撒风</p>
    <p>阿斯利康减肥撒风</p>
</ph-window>
`;
export const baseConfirm = `
import { PhConfirm } from 'phoeon'
interface WinData{
    doneText?:string,
    cancelText?:string
}
const enum ConfirmAction{
    Done=1,
    Cancel=0,
    Mask=-1
}
interface IShowRetrun{
    done(fn:(res:ConfirmAction)=>void):void
}
interface Confirm{
    open:(content:string,title="系统提示",opt:WinData={})=>IShowRetrun
}
`;
export const confirmDemo = `
<template>
    <!-- 建议放在全局，然后顶层provide注入，共享单例 -->
    <ph-confirm ref="confirm"></ph-confirm>
    <ph-button @click="openConfirm">打开confirm</ph-button>
</template>
<script>
    setup(){
        const confirm = ref("confirm")
        const openConfirm = ()=>{
            confirm?.value?.open("contentsss...")
            .done((status)=>{
                console.log(status)
            })
        }
        return {confirm,openConfirm}
    }
</script>
`;
export const baseAlert = `
import { PhAlert } from 'phoeon'
interface IShowRetrun{
    done(fn:()=>void):void
}
interface Alert{
    open:(content:string,title="系统提示",opt:{doneText?:string}={}):IShowRetrun
}
`;
export const alertDemo = `
<template>
    <!-- 建议放在全局，然后顶层provide注入，共享单例 -->
    <ph-alert ref="alert"></ph-alert>
    <ph-button @click="openAlert">打开alert</ph-button>
</template>
<script>
    setup(){
        const alert = ref("alert")
        const openAlert = ()=>{
            alert?.value?.open("请做好备份")
        }
        return {alert,openAlert}
    }
</script>
`;
export const code = `
<template>
    <ph-divider>基本功能展示</ph-divider>
    <ph-button-group :container="true">
        <ph-button @click="open">打开窗口</ph-button>
        <ph-button @click="openConfirm">打开confirm</ph-button>
        <ph-button @click="openAlert">打开alert</ph-button>
    </ph-button-group>
    <ph-tab>
        <ph-tab-panel title="窗口介绍">
            <ph-pretty>{{baseWindow}}</ph-pretty>
            <ph-button @click="open">打开窗口</ph-button>
            <ph-pretty>{{windowDemo}}</ph-pretty>
        </ph-tab-panel>
        <ph-tab-panel title="confirm介绍">
            <ph-pretty>{{baseConfirm}}</ph-pretty>
            <ph-button @click="openConfirm">打开confirm</ph-button>
            <ph-pretty>{{confirmDemo}}</ph-pretty>
        </ph-tab-panel>
        <ph-tab-panel title="alert介绍">
            <ph-pretty>{{baseAlert}}</ph-pretty>
            <ph-button @click="openAlert">打开alert</ph-button>
            <ph-pretty>{{alertDemo}}</ph-pretty>
        </ph-tab-panel>
        <ph-tab-panel title="基本介绍">
        </ph-tab-panel>
    </ph-tab>
    <ph-window :visible="visible" @done="onDone" @close="onClose" @mask-click="onDone">
        <template v-slot:title>
            this is title
        </template>
        <p>阿斯利康减肥撒风</p>
        <p>阿斯利康减肥撒风</p>
        <p>阿斯利康减肥撒风</p>
        <p>阿斯利康减肥撒风</p>
        <p>阿斯利康减肥撒风</p>
        <p>阿斯利康减肥撒风</p>
    </ph-window>
</template>
<script lang="ts">
import { defineComponent,inject } from 'vue'
import {PhButtonGroup,PhButton , PhWindow,PhDivider,PhTab,PhTabPanel} from 'phoeon'
import {Confirm ,Alert} from '@/typings'


export default defineComponent({
    data(){
        return {
            visible:false
        }
    },
    setup(){
        const confirm = inject("confirm") as Confirm
        const alert = inject("alert") as Alert
        return {confirm,alert}
    },
    methods:{
        open(){
            this.visible = true
        },
        onDone(){
            this.visible = false
        },
        onClose(){
            this.visible = false
        },
        openConfirm(){
            const $confirm = this.confirm
            
            $confirm.open("contentsss...")
            .done((status)=>{
                console.log(status)
            })
        },
        openAlert(){
            this.alert.open("请做好备份")
        }
    },
    components:{PhButtonGroup,PhButton , PhWindow,PhDivider,PhTab,PhTabPanel}
})
</script>

`;
